<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>曼巴oauth2.0权限中心</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->


  <link rel="stylesheet" href="http://img.mabach.cn/index.css">
  <link  rel="stylesheet" href="http://img.mabach.cn/adminlte.min.css">
  <!-- Google Font: Source Sans Pro -->
<!--  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">-->
</head>
<body class="hold-transition login-page">

<div class="login-box" id="app">
  <div class="login-logo">
    <a href="#">曼巴oauth2.0权限中心</a>
  </div>
  <!-- /.login-logo -->
  <div class="card">
    <div class="card-body login-card-body">
      <p class="login-box-msg">请登录</p>

      <a :href="gologin" href="login.html" style="float:right;font-size: 16px;">
        <i class="fa fa-lock mr-1"></i>使用密码验证登录
      </a>
      <form >
        <div class="input-group mb-3">
          <input id="mobile" v-model="mobile" name="mobile" type="text" class="form-control" placeholder="手机号码">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fa fa-user"></span>
            </div>
          </div>
        </div>

        <div class="mb-3 row">
          <div class="col-6">
            <input type="text" v-model="code"  name="code" class="form-control" placeholder="验证码">
          </div>
          <div class="col-6">
            <input type="button" style="height:40px;width:140px;" :value="getcode" :disabled="flag" @click="sendCode()" id="sendCode"/>
<!--            <a id="sendCode" th:attr="code_url=@{/code/mobile?mobile=}" class="btn  btn-outline-primary btn-large" href="#"> 获取验证码 </a>-->
          </div>
        </div>

        <!-- 提示信息, 表达式红线没关系，忽略它 -->
        <div th:if="${param.error}">
          <span th:text="${session.SPRING_SECURITY_LAST_EXCEPTION?.message}" style="color:red"></span>
        </div>

        <div class="row">
<!--          <div class="col-8">-->
<!--            <div class="icheck-primary">-->
<!--              <input name="remember-me" type="checkbox" id="remember">-->
<!--              <label for="remember">-->
<!--                记住我-->
<!--              </label>-->
<!--            </div>-->
<!--          </div>-->
          <!-- /.col -->
          <div class="col-12">
            <button type="button" @click="login()" class="btn btn-primary btn-block">登录</button>
          </div>
          <!-- /.col -->
        </div>

      </form>


      <div class="social-auth-links text-center mb-3">

        <a :href="toQQLogin" class="btn btn-block btn-success">
           QQ登录
        </a>

      </div>



      <p class="mb-0">
        <a :href="toregister" class="text-center">注册帐号</a>
      </p>
    </div>
    <!-- /.login-card-body -->
  </div>
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="http://img.mabach.cn/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="http://img.mabach.cn/bootstrap.bundle.min.js"></script>



<!-- import Vue before Element -->
<script src="http://img.mabach.cn/vue.js"></script>
<!-- import JavaScript -->
<script src="http://img.mabach.cn/elementui.js"></script>
<script src="http://img.mabach.cn/axios.js"></script>



<script th:inline="javascript">
  var app= new Vue({
    el:"#app",
    data:{
        clock : '',
        nums :20,
      mobile:"",
      code:"",
      from:[[${from}]],
        gologin : "/api-oauth/toLogin?from="+[[${from}]],

        toregister: "/api-portal/portal/register?from="+[[${from}]],
        toQQLogin : "/api-oauth//toQQLogin?from-"+[[${from}]],

        getcode : "获取验证码",
        flag : false,


    },
    methods:{

        doLoop (){


      this.nums--;

      if(this.nums > 0){

          this.getcode = this.nums+'秒后可重新获取';

      }else{

          clearInterval(this.clock); //清除js定时器

          this.flag = false;

          this.getcode = "点击获取证码";

          this.nums = 20; //重置时间

      }

  },

  sendCode (){

        if(this.mobile == '') {
          this.$message.error("手机号不能为空");
          return;
        }

        axios.post(`/api-oauth/code/mobile?mobile=${this.mobile}`).then(response => {

          if (response.data.flag){
          this.$message.success("发送成功");

          this.flag = true; //将按钮置为不可点击

          this.getcode = this.nums+'秒后可重新获取';

          this.clock = setInterval(this.doLoop, 1000); //一秒执行一次

        }else {

          this.$message.error(response.data.message);

        }


      });
      },


      login (){

        axios.post(`/api-oauth/mobile/login?mobile=${this.mobile}&code=${this.code}`).then(response => {

          if (response.data.flag){

          window.location=[[${from}]];
        }else {
          // alert("登陆失败")
          this.$message.error(response.data.message);

        }




      });
      },

    }
  })
</script>
</body>
</html>
